import React, { useState, useEffect } from 'react';
import {Input, Select, Form, Box, Button, Card, DatePicker, Message, Radio, Upload, Switch, Dialog } from '@alifd/next';
import BasicForm from '@/pages/FormBasic/components/BasicForm';
import styles from './index.module.scss';
import {add} from '@/api/UserAPI'
import {upLoadImage} from '@/api/CommonAPI'
const FormItem = Form.Item;
const formItemLayout = {
  colSpan: 6,
};

const DEFAULT_DATA = {
    userType: '0',
    sex: '1',
    loginName:'',
    password:'',
    phoneNum:'',
    name:'',
    code:'',
    nickName:'',
    logoUrl:'',
    logoUrlId:'',
  };

const AddUser = props => {
    // Dialog 弹框部分
    const [visible, setVisible] = useState(false);
    const [short, setShort] = useState(false);
    const [shouldUpdatePosition, setShouldUpdatePosition] = useState(true);
    // 1 打开弹框
    const onOpen = () => {
        setVisible(true)
        setShort(true)
    };
    // 2 关闭弹框
    const onClose = () => {
        setVisible(false)
    };
    // 3 更新位置
    const toggleShouldUpdatePosition = () => {
        setShouldUpdatePosition(shouldUpdatePosition)
    };
    /*************************** 新增表单部分 ***************************** */
    const { dataSource = DEFAULT_DATA} = props;
    const [postData, setValue] = useState(dataSource);
    const formChange = values => {
      setValue(values);
    };
    const onCancel = () => {
        onClose();
    };
    /**
     * 上传附件
     * @param {*} info 
     */
    const upLoadImageBegin = (info) => {
        // 1 调用上传API
        upLoadImage( 'file', info.file).then((data)=>{
            // 2 赋值URL和ID
            dataSource.logoUrl = data.url
            dataSource.logoUrlId = data.id
            // 4 回显信息
            let onSuccessInfo = {
                success: true,
                url: data.url,
            }
            info.onSuccess(onSuccessInfo);
        });
    };
    // 提交表单信息
    const onSubmit = (values, errors) => {
        if (errors) {
          console.log('errors', errors);
          return;
        }
        // 处理上传文件属性
        delete values.file
        values.logoUrl= dataSource.logoUrl;
        values.logoUrlId = dataSource.logoUrlId
        // 调用新增用户API接口
        add(values).then((flag)=>{
            if(flag){
                Message.success('提交成功');
                resetForm(); // 清空表单源数据
                onClose();
                props.onFreshList();
            }
        });
    };
    /**
     * 重置表单
     */
    const resetForm = ()=>{
        setValue({
            userType: '0',
            sex: '1',
            loginName:'',
            password:'',
            phoneNum:'',
            name:'',
            code:'',
            nickName:'',
            logoUrl:'',
            logoUrlId:'',
        });
    }

    return (
        <div > 
            <Button type="primary" onClick={onOpen}>新增</Button>
            <Dialog title="新增用户信息" visible={visible} footer ={false}  onClose={onCancel}>
                <Card free className={styles.TwoColumnForm}>
                <Card.Content>
                    <Form responsive fullWidth value={postData} labelAlign="top" onChange={formChange}>
                        <FormItem {...formItemLayout} label="账户登录名：" required requiredMessage="必填">
                            <Input placeholder="请输入用户登录名" name="loginName" />
                        </FormItem>
                        <FormItem {...formItemLayout} label="用户类型：">
                            <Radio.Group name="userType" aria-labelledby="用户类型~">
                                <Radio id="ordinary" value="0">普通用户</Radio>
                                <Radio id="manger" value="1">管理用户</Radio>
                                <Radio id="system" value="-1">系统用户</Radio>
                            </Radio.Group>
                        </FormItem>
                        <FormItem {...formItemLayout} label="账户密码：" required requiredMessage="必填">
                            <Input placeholder="请输入用户账户密码" name="password" />
                        </FormItem>

                        <FormItem {...formItemLayout} label="用户手机号：" required requiredMessage="必填">
                            <Input placeholder="请输入用户手机号" name="phoneNum" />
                        </FormItem>

                        <FormItem {...formItemLayout} label="用户姓名：" required requiredMessage="必填">
                            <Input placeholder="请输入用户姓名" name="name" />
                        </FormItem>
                        <FormItem {...formItemLayout} label="用户代码：" required requiredMessage="必填">
                            <Input placeholder="请输入用户代码" name="code" />
                        </FormItem>
                        <FormItem {...formItemLayout} label="用户昵称：" required requiredMessage="必填">
                            <Input placeholder="请输入用户昵称" name="nickName" />
                        </FormItem>
                        <FormItem {...formItemLayout} label="用户性别：" required requiredMessage="必填">
                            <Radio.Group name="sex" aria-labelledby="用户性别~">
                                <Radio id="man" value="1">男</Radio>
                                <Radio id="woman" value="2">女</Radio>
                            </Radio.Group>
                        </FormItem>

                        <FormItem {...formItemLayout} label="上传用户头像：" >
                            <Upload listType="image"
                                accept="image/png, image/jpg, image/jpeg, image/gif, image/bmp" shape="card" 
                                name="file" 
                                limit={1}
                                request={upLoadImageBegin} 
                            />
                        </FormItem>

                        <FormItem colSpan={12} style={{marginLeft:'35%'}}>
                            <Box spacing={8} direction="row" align="center">
                                <Form.Submit type="primary" onClick={onSubmit} validate>提交</Form.Submit>
                                <Button onClick={onCancel} type="secondary">取消</Button>
                            </Box>
                        </FormItem>
                    </Form>
                </Card.Content>
                </Card>
            </Dialog>
        </div>
    );
}

export default AddUser;
